import React, { Component } from 'react'

import { Card, Button } from 'antd'
import ReactEcharts from 'echarts-for-react'
/*
折线图路由
 */

export default class Line extends Component {
    state = {
        use: [30, 20, 36, 60, 10, 20],
        banPick: [20, 10, 50, 35, 50, 14]
    }
    update = () => {
        this.setState({
            use: this.state.use.map(item => item + 5),
            banPick: this.state.banPick.map(item => item + 3),
        })
    }
    //返回柱状图的配置和数据
    getOption = (use, banPick) => {
        return {
            title: {
                text: 'RNG队员使用英雄详情介绍'
            },
            tooltip: {},
            legend: {
                data: ['英雄使用次数', '比赛BP次数']
            },
            xAxis: {
                data: ["兰博", "阿卡丽", "滑板鞋", "奶妈", "加里奥", "酒桶"]
            },
            yAxis: {},
            series: [
                {
                    name: '英雄使用次数',
                    type: 'line',
                    data: use
                },
                {
                    name: '比赛BP次数',
                    type: 'line',
                    data: banPick
                }
            ],
        }
    }
    render() {
        const { use, banPick } = this.state
        return (
            <div>
                <Card>
                    <Button type='primary' onClick={this.update}>更新</Button>
                </Card>
                <Card title="折线分析图">
                    <ReactEcharts option={this.getOption(use, banPick)} style={{ height: 400 }} />
                </Card>
            </div>
        )
    }
}
